<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>{% block title %}后台管理{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="icon" href="{{ url_for('static', filename='img/logo-mini.svg') }}"/>
    <link rel="stylesheet" href="{{ url_for('static', filename='layui/css/layui.css') }}"/>

    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #app {
            display: flex;
            height: 100vh;
            overflow: hidden;
        }

        /* 左侧侧边栏整体容器 */
        #sidebar {
            width: 200px;
            background-color: #2f4056;
            color: #fff;
            display: flex;
            flex-direction: column;
            transition: all 0.3s;
            flex-shrink: 0;
        }

        /* logo 部分 */
        .logo-container {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #202a36;
            border-bottom: 1px solid #1f2d3d;
        }

        .logo-full {
            height: 32px;
        }

        .logo-mini {
            display: none;
            height: 32px;
        }

        /* 缩小模式 */
        .sidebar-collapsed {
            width: 60px !important;
        }

        .sidebar-collapsed .logo-full {
            display: none;
        }

        .sidebar-collapsed .logo-mini {
            display: inline-block;
        }

        /* 覆盖layui导航样式 */
        .layui-nav.layui-nav-tree {
            width: 200px !important;
        }

        .sidebar-collapsed .layui-nav.layui-nav-tree {
            width: 60px !important;
        }

        .sidebar-collapsed .layui-nav-item {
            text-align: center;
        }

        .sidebar-collapsed .layui-nav-item span {
            display: none;
        }

        .sidebar-collapsed .layui-nav-item i {
            margin-right: 0;
            font-size: 18px;
        }

        .sidebar-collapsed .layui-nav-child {
            position: absolute;
            left: 60px;
            top: 0;
            min-width: 160px;
            border-radius: 0 4px 4px 0;
        }

        .layui-nav-tree {
            flex: 1;
            overflow-y: auto;
        }

        /* 主体内容容器 */
        .main-content-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            transition: margin-left 0.3s;
            background-color: #f2f2f2;
            width: calc(100% - 200px);
        }

        .sidebar-collapsed + .main-content-wrapper {
            width: calc(100% - 60px);
            margin-left: 60px;
        }

        /* 顶部导航 */
        #top-nav {
            height: 60px;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            border-bottom: 1px solid #ddd;
        }

        #toggleSidebar {
            cursor: pointer;
            font-size: 18px;
        }

        .user-info {
            display: flex;
            align-items: center;
        }

        .user-info .layui-nav-img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .content-area {
            flex: 1;
            padding: 20px;
            overflow: auto;
        }

        .footer {
            height: 40px;
            background-color: #f8f8f8;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            color: #666;
            border-top: 1px solid #ddd;
        }

        #mobileMask {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 999;
        }

        @media (max-width: 768px) {
            #sidebar {
                position: fixed;
                left: -200px;
                top: 0;
                height: 100vh;
                z-index: 1000;
                transition: left 0.3s;
            }

            #sidebar.sidebar-mobile-show {
                left: 0;
            }

            .main-content-wrapper {
                width: 100% !important;
                margin-left: 0 !important;
            }
        }
    </style>
</head>
<body>

<div id="app">

    <!-- 左侧侧边栏 -->
    <div id="sidebar">
        <div class="logo-container">
            <img src="{{ url_for('static', filename='img/logo.svg') }}" class="logo-full" alt="Logo"
                 style="height: 40px"/>
            <img src="{{ url_for('static', filename='img/logo-mini.svg') }}" class="logo-mini" alt="Mini Logo"/>
        </div>
        <!-- 侧边栏部分修改示意 -->
        <ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="side-nav" style="margin-top: 50px">
            <li class="layui-nav-item {% if active_page == 'dashboard' %}layui-this{% endif %}">
                <a href="{{ url_for('admin_layui.dashboard') }}">
                    <i class="layui-icon layui-icon-home"></i><span>仪表盘</span></a></li>

            <li class="layui-nav-item {% if active_page == 'users' %}layui-this{% endif %}">
                <a href="{{ url_for('admin_layui.users') }}">
                    <i class="layui-icon layui-icon-username"></i><span>用户管理</span></a></li>

            <li class="layui-nav-item {% if active_page == 'websites' %}layui-this{% endif %}">
                <a href="{{ url_for('admin_layui.websites') }}">
                    <i class="layui-icon layui-icon-link"></i><span>网站管理</span></a></li>

            <li class="layui-nav-item {% if active_page == 'categories' %}layui-this{% endif %}">
                <a href="{{ url_for('admin_layui.categories') }}">
                    <i class="layui-icon layui-icon-template-1"></i><span>分类管理</span></a></li>

            <li class="layui-nav-item {% if active_page == 'suggestions' %}layui-this{% endif %}">
                <a href="{{ url_for('admin_layui.suggestions') }}">
                    <i class="layui-icon layui-icon-dialogue"></i><span>建议管理</span></a></li>

            <li class="layui-nav-item {% if active_page == 'images' %}layui-this{% endif %}">
                <a href="{{ url_for('admin_layui.images') }}">
                    <i class="layui-icon layui-icon-picture"></i><span>图片管理</span></a></li>

            <li class="layui-nav-item {% if active_page == 'logs' %}layui-this{% endif %}">
                <a href="{{ url_for('admin_layui.logs') }}">
                    <i class="layui-icon layui-icon-log"></i><span>访问日志</span></a></li>
        </ul>


    </div>

    <!-- 右侧主体内容 -->
    <div class="main-content-wrapper">
        <!-- 顶部导航 -->
        <div id="top-nav">
            <div id="toggleSidebar" title="切换侧边栏">
                <i class="layui-icon layui-icon-shrink-right"></i>
            </div>
            <div class="user-info">
                <img src="{{ url_for('static', filename='img/default.png') }}" class="layui-nav-img" alt="头像"/>
                <span>管理员</span>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content-area">
            {% block content %}{% endblock %}
        </div>

        <!-- 页脚 -->
        <div class="footer">
            © 2025 后台管理系统 版权所有
        </div>
    </div>

    <div id="mobileMask"></div>
</div>

<script src="{{ url_for('static', filename='layui/layui.js') }}"></script>
<script>
    layui.use(['element'], function () {
        const $ = layui.$;
        const element = layui.element;
        element.render('nav');

        const sidebar = $('#sidebar');
        const toggleBtn = $('#toggleSidebar');
        const icon = toggleBtn.find('i');
        const mainContent = $('.main-content-wrapper');
        const token = localStorage.getItem('token');

        if (token) {
            $.ajax({
                url: '/api/auth/user',
                method: 'POST',
                headers: {
                    Authorization: 'Bearer ' + token
                },
                success: function (res) {
                    console.log(res);
                    if (res.code === 0) {
                        $('.user-info span').text(res.data.username);
                    } else {
                        window.location.href = '/admin/v2/login';
                    }
                },
                error: function () {
                    window.location.href = '/admin/v2/login';
                }
            });
        } else {
            console.warn('token 不存在，跳转登录页');
            window.location.href = '/admin/v2/login';
        }

        toggleBtn.on('click', function (e) {
            e.stopPropagation();

            if ($(window).width() <= 768) {
                sidebar.toggleClass('sidebar-mobile-show');
                $('#mobileMask').toggle();
            } else {
                sidebar.toggleClass('sidebar-collapsed');
                if (sidebar.hasClass('sidebar-collapsed')) {
                    icon.removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');
                } else {
                    icon.removeClass('layui-icon-spread-left').addClass('layui-icon-shrink-right');
                }
            }
        });

        $('#mobileMask').on('click', function () {
            sidebar.removeClass('sidebar-mobile-show');
            $(this).hide();
        });
    });
</script>

{% block scripts %}{% endblock %}
</body>
</html>